<template>
    <!-- ******************************************************* -->
    <!-- 操作按钮区域 -->
    <!-- ******************************************************* -->
    <div style="text-align:left; margin-bottom: 10px;">
        <el-button @click="onAdd()">
            <el-icon style="margin-right: 6px;">
                <CirclePlus />
            </el-icon>
            添加角色
        </el-button>
        <el-button @click="onModify($t('common.modify'))">
            <el-icon style="margin-right: 6px;">
                <Edit />
            </el-icon>
            批量移除
        </el-button>
    </div>

    <div class="dataArea">
        <el-table :data="tableData" height="100%" highlight-current-row
            @selection-change="handleSelectionChange"
            style="width: 100%; font-size: 12px; border-radius: 4px; border: 1px solid #eee" :header-cell-style="{
                background: '#fafafa',
                color: '#333',
                fontWeight: '600',
                fontSize: '14px'
            }">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" width="50" />

            <el-table-column prop="NAME" label="角色名" width="180" />
            <el-table-column prop="REMARK" label="说明" />
        </el-table>
    </div>

    <el-dialog v-model:model-value="addRoleDialogVisible" width="800px"  destroy-on-close align-center>
        <roleAdd ref="addRoleDialogInstance" :userId='props.userId' />

        <template #header>
            <div style="float: left;">
                添加角色
            </div>
        </template>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addRoleDialogVisible = false">
                    取消
                </el-button>
                <el-button type="primary" @click="onSaveAddRoleDialog()">
                    添加
                </el-button>
            </span>
        </template>

    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'

import roleAdd from './roles_add.vue'

let tableData = reactive([])

const addRoleDialogVisible = ref(false);  // 控制添加角色弹窗显示

const props = defineProps(['userId'])

onMounted(() => {
    queryRoleList();
})

const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}

// 查询用户的角色列表
const queryRoleList = () => {
    // import axios from 'axios' 
    axios.post("/api/system/user/role/list",
        {
            'USER_ID': props.userId
        }).then(res => {
            if (res.data.code == "200") {
                //请添加执行成功后的业务代码 

                tableData.length = 0;
                if(res.data.data.roles != null && res.data.data.roles.length > 0){
                    for(var i = 0 ; i < res.data.data.roles.length ; i++){
                        tableData.push(res.data.data.roles[i]);
                    }
                }
                
            } else {
                // 错误消息为：res.data.msg 
                // 请添加执行失败后的业务代码 
            }
        });
}

// 添加角色
const onAdd = () => {
    addRoleDialogVisible.value = true;
}

const addRoleDialogInstance=ref();
const onSaveAddRoleDialog=() =>{
    console.log(addRoleDialogInstance.value.confirm)
    addRoleDialogInstance.value.confirm(()=>{
        queryRoleList();
        addRoleDialogVisible.value = false;
    });
}

</script>